import { CSSProperties, ReactNode } from "react";
import { Text, View } from "@tarojs/components";
import ByPopup from "./ByPopup";
import ByIcon from "./ByIcon";

type ByPopupBottomProps = {
  title?: string;
  slotTitle?: ReactNode;

  tip?: string;

  children?: ReactNode;
  slotFooter?: ReactNode;

  style?: CSSProperties | string;
};

export type ByPopupBottomEvent = {
  onCancel?: () => void;
  onMaskClick?: () => void;
};

export default ({
  tip,
  style,
  title,
  children,
  slotFooter,
  slotTitle,

  onCancel,
  onMaskClick,
}: ByPopupBottomProps & ByPopupBottomEvent) => {
  return (
    <ByPopup
      position="bottom"
      onMaskClick={onMaskClick}
      style={style}
      // @ts-ignore 可以在弹窗状态 避免page滚动
      catchtouchmove={true}
    >
      <View className="flex flex-col bg-white rounded-t-3xl pt-4">
        <View className="flex px-4 mb-4 items-center">
          <View className="flex-auto">
            {slotTitle ? (
              slotTitle
            ) : (
              <Text className="font-biold text-lg">{title}</Text>
            )}

            <Text className="text-sm text-second">{tip}</Text>
          </View>

          <ByIcon
            name="CloseCircle"
            size={42}
            color="#666"
            onClick={onCancel}
          />
        </View>

        <View className={"flex-auto"}>{children}</View>

        <View>{slotFooter}</View>
        <View className="safe-footer" />
      </View>
    </ByPopup>
  );
};
